<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="showDetail"
    :append-to-body="true"
    :close-on-click-modal="false"
    :show-close="true"
    :before-close="close"
    title="外部线索详情"
    width="80%"
  >
    <div class="detailForm">
      <el-form
        ref="detailForm"
        :model="entity"
        :disabled="true"
        label-width="90px"
      >
        <el-row :gutter="8">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="name" label="客户名称">
              <el-input
                v-model="entity.name"
                placeholder="客户名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="telephone" label="电话">
              <el-input
                v-model="entity.telephone"
                placeholder="电话"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="gender" label="性别">
              <el-input
                v-model="entity.gender"
                placeholder="性别"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="CREATED_AT" label="线索创建时间">
              <el-input
                v-model="entity.CREATED_AT"
                placeholder="线索创建时间"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clue_status" label="线索状态">
              <el-select v-model="entity.clue_status" clearable placeholder="请选择">
                <el-option v-for="item in clueStatusOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clue_source" label="线索渠道">
              <el-select v-model="entity.clue_source" clearable placeholder="请选择">
                <el-option v-for="item in clueSourceOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="clue_type" label="线索类型">
              <el-select v-model="entity.clue_type" clearable placeholder="请选择">
                <el-option v-for="item in clueTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="app_name" label="流量来源">
              <el-input
                v-model="entity.app_name"
                placeholder="流量来源"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="flow_type" label="流量类型">
              <el-select v-model="entity.flow_type" clearable placeholder="请选择">
                <el-option v-for="item in flowTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="action_type" label="互动类型">
              <el-select v-model="entity.action_type" clearable placeholder="请选择">
                <el-option v-for="item in actionTypeOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealer_name" label="经销商名称">
              <el-input
                v-model="entity.dealer_name"
                placeholder="经销商名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="series_name" label="产品小类">
              <el-input
                v-model="entity.series_name"
                placeholder="产品小类"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="province_name" label="省份">
              <el-input
                v-model="entity.province_name"
                placeholder="省份"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="city_name" label="城市">
              <el-input
                v-model="entity.city_name"
                placeholder="城市"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="address" label="客户地址">
              <el-input
                v-model="entity.address"
                placeholder="客户地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="remark" label="备注">
              <el-input
                v-model="entity.remark"
                placeholder="备注"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <div slot="footer" style="text-align:center" class="dialog-footer">
      <el-button type="text"><i class="el-icon-search magnifier"/></el-button>
      <el-button @click="close">取 消</el-button>
    </div>

  </el-dialog>
</template>

<script>
import formMixins from '@/mixins/formMixins'
import { mapGetters } from 'vuex'
import filtercode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import { findSeries } from '@/api/vehicle/custBiz.js'

export default {
  components: {
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  props: {
    showDetail: {
      type: Boolean,
      default: false
    },
    entity: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      clueStatusOptions: [{ 'value': '0', 'name': '新线索' }, { 'value': '1', 'name': '有意向' }, { 'value': '2', 'name': '无意向' }],
      clueSourceOptions: [{ 'value': '1', 'name': '字节-橙子建站' }, { 'value': '2', 'name': '其他渠道-外部导入' },
        { 'value': '5', 'name': '字节-抖音企业号' }, { 'value': '7', 'name': '字节-巨量线索' }, { 'value': '8', 'name': '字节-云店' },
        { 'value': '9', 'name': '字节-星图' }, { 'value': '10', 'name': '字节-获客宝' }, { 'value': '11', 'name': '字节-住小帮' }],
      clueTypeOptions: [{ 'value': '0', 'name': '字节-表单提交' }, { 'value': '1', 'name': '字节-在线咨询' }, { 'value': '2', 'name': '字节-智能电话' },
        { 'value': '3', 'name': '字节-网页回呼' }, { 'value': '4', 'name': '字节-卡券' }, { 'value': '5', 'name': '字节-抽奖' }],
      flowTypeOptions: [{ 'value': '1', 'name': '经营-自然流量线索' }, { 'value': '2', 'name': '经营-广告直接线索' }, { 'value': '3', 'name': '经营-广告间接线索' },
        { 'value': '4', 'name': '广告线索' }, { 'value': '5', 'name': '无' }],
      actionTypeOptions: [{ 'value': '0', 'name': '其他' }, { 'value': '1', 'name': '短视频' }, { 'value': '2', 'name': '直播' },
        { 'value': '3', 'name': '企业主页' }, { 'value': '4', 'name': '私信' }, { 'value': '5', 'name': '订阅文章' }],
      seriesIds: [],
      provinceOptions: [],
      cityOptions: []
    }
  },
  computed: {
    ...mapGetters(['dictMap', 'regionMap'])
  },
  // 初始化
  mounted() {
    this.searchSeries()
    const array = Object.values(this.regionMap)
    this.provinceOptions = array
  },

  methods: {
    close() {
      this.$emit('update:showDetail', false)
      // if (this.$refs['detailForm']) {
      //   // this.$refs['detailForm'].resetFields()
      //   this.$parent.entityHandle()
      // }
    },
    // 查询车系
    searchSeries() {
      findSeries().then(res => {
        this.seriesIds = res
      }).catch(err => {
      })
    }
  }
}
</script>

<style scoped>
  .new-order-wrapper {
    padding: 10px 20px;
  }

  .new-order-wrapper .el-step__title {
    font-size: 14px;
  }

  .row-line {
    width: 100%;
  }

  .bm-view {
    width: 100%;
    height: 300px;
  }

  .redItem .el-form-item__label {
    color: indianred;
  }
</style>
